<template>
  <el-col :span="24">
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/account'">
      <el-col :span="24" class="flex-1" style>
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">类型</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.type" clearable placeholder="请选择迁移类型">
                <el-option label="迁入" value="迁入"></el-option>
                <el-option label="迁出" value="迁出"></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 100px;">迁移时间</label>
            <el-date-picker
              v-model="query.data.date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
            ></el-date-picker>
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-10 pl-3">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="gender"></el-table-column>
          <el-table-column label="迁移时间" width="200" align="center" prop="date"></el-table-column>
          <el-table-column label="迁移类型" width="140" align="center" prop="type"></el-table-column>
          <el-table-column label="电话号码" width="240" align="center" prop="tel"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/account'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/basic'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" disabled placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium w-4"></div>
          <div class="el-form-item el-form-item--medium">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="行政村名" width="240" align="center" prop="vill_name"></el-table-column>
          <el-table-column label="村主任" width="240" align="center" prop="vill_director"></el-table-column>
          <el-table-column label="所属地区" width="200" align="center" prop="area"></el-table-column>
          <el-table-column label="人口数量" width="140" align="center" prop="count"></el-table-column>
          <el-table-column label="占地面积" width="140" align="center" prop="size"></el-table-column>
          <el-table-column prop="name" label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'vill_name')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('vill_name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/group'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium w-2 ml-5"></div>
          <div class="el-form-item el-form-item--medium">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="组名" width="340" align="center" prop="group_name"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/group'">
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'group_name')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('group_name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/house'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">组</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.group" clearable placeholder="请选择想要查看的组">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-7">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="户名" width="340" align="center" prop="house_name"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/house'">
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'house_name')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('house_name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/job'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium pl-2">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="240" align="center"></el-table-column>
          <el-table-column label="职务名" align="center" prop="job_name" show-overflow-tooltip></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/job'">
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'job_name')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-start ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('job_name')"
                ></el-button>
              </div>
            </el-col>
            <el-col :span="12" class="pr-6">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/subsidy'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择想要查看的镇">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">补助类型</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="补助类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-9">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="补助项" width="240" align="center" prop="item">
          </el-table-column>
          <el-table-column label="补助金额" width="240" align="center" prop="name">
          </el-table-column>
          <el-table-column label="补助类型" width="200" align="center" prop="type">
          </el-table-column>
          <el-table-column label="申请时间" width="140" align="center" prop="date">
          </el-table-column>
         <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/subsidy'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                ></el-button>
                <el-select v-model="value4" clearable placeholder="表类型" class="ml-10 pl-10">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/village'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">姓名</label>
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              clearable
              :fetch-suggestions="querySearch"
              placeholder="请输入姓名"
              @select="handleSelect"
            ></el-autocomplete>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-10 pl-2">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" align="center"></el-table-column>
          <el-table-column type="index" width="100" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="gender"></el-table-column>
          <el-table-column label="民族" width="100" align="center" prop="nation"></el-table-column>
          <el-table-column label="组" width="120" align="center" prop="group"></el-table-column>
          <el-table-column label="联系电话" width="200" align="center" prop="tel"></el-table-column>
          <el-table-column label="身份证号" width="280" align="center" prop="id_card"></el-table-column>
          <el-table-column label="状态" width="140" align="center" prop="status"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/village'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/cadre'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">入职年份</label>
            <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年"></el-date-picker>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-7 pl-2">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" align="center"></el-table-column>
          <el-table-column type="index" width="100" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="gender"></el-table-column>
          <el-table-column label="职务" width="200" align="center" prop="job"></el-table-column>
          <el-table-column label="当选年份" width="140" align="center" prop="start_year"></el-table-column>
          <el-table-column label="联系电话" width="200" align="center" prop="id_card"></el-table-column>
          <el-table-column label="身份证号" width="280" align="center" prop="tel"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/cadre'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/party'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">党员姓名</label>
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              clearable
              :fetch-suggestions="querySearch"
              placeholder="请输入姓名"
              @select="handleSelect"
            ></el-autocomplete>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-7 pl-2">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" align="center"></el-table-column>
          <el-table-column type="index" width="100" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="120" align="center" prop="gender"></el-table-column>
          <el-table-column label="民族" width="120" align="center" prop="nation"></el-table-column>
          <el-table-column label="职务" width="300" align="center" prop="job"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/party'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/org'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">镇</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的镇"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 100px;">身份变更时间</label>
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
            ></el-date-picker>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">人员身份</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择人员身份">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-10 pl-3">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="gender"></el-table-column>
          <el-table-column label="人员身份" width="200" align="center" prop="person_type"></el-table-column>
          <el-table-column label="职务" width="140" align="center" prop="job"></el-table-column>
          <el-table-column label="就职单位" width="240" align="center" prop="job_add"></el-table-column>
          <el-table-column label="身份变更时间" width="140" align="center" prop="change_time"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/org'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-select v-model="value4" clearable placeholder="表类型" class="ml-10 pl-10">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>

export default {
  data() {
    return {
      loading: true,
      pagination: {
        current_page: 0,
        page_sizes: [],
        page_size: 0,
        total: 0,
        page_length: 0,
        method: true
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      form: {
        //弹出框内容
      },
      query: {
        //检索对象
        method: true,
        data: {}
      },
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      init_items_mes: {
        count: 50
      },
      //序列id
      index_id: 0,
      index: 0,
      //对应村
      villageAtt: [],
      //多删数组
      delAtt: [],
      multipleSelection: [],
      //文件上传
      fileList: [],

      //搜索功能
      query_items: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { _id } = item;
        att.push(_id);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },

    del(index, name) {
      console.log("haha");
      this.index_id = index;
      this.form = this.items[index];
      this.$confirm(
        `此操作将永久删除 ${this.items[index][name]}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async index => {
          const res = await this.$http.delete(
            this.$route.name + `/${this.items[this.index_id]._id}`
          );
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updata(index) {
      // alert("hahah");
      this.index_id = index;
      this.form = this.items[index];
    },

    //请求数据
    async fetch() {
      const res = await this.$http.get(this.$route.name);
      this.init_items = res.data;
      // this.init_items = res.mes
      //设置query搜索和page分页是否每次都需ajax请求
      // this.set_methods();

      this.up_pagination();
      this.up_table();
      this.loading = false;
      this.set_methods();
      if (this.$util.getCookie("current_page")) {
        this.handleCurrentChange(this.$util.getCookie("current_page"));
      }
    },
    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除 ${str}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          console.log(".....////");
          console.log({
            delAtt: this.delAtt
          });
          const res = await this.$http.post(
            this.$route.name + `/del`,
            this.delAtt
          );
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //选择文件
    select_file() {
      let path = this.$route.name;
      console.log(path);
      if (path == "account") {
        this.$notify({
          title: "警告",
          message: "这是一条警告的提示消息",
          type: "warning"
        });
        // this.$notify.error({
        //   title: '错误',
        //   message: '这是一条错误的提示消息',
        //   duration: 0
        // });
      }
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    up_pagination() {
      this.pagination.page_length =
        this.init_items.length / this.pagination.current_page + 1;
      this.pagination.current_page = 1;
      this.pagination.page_size = 8;
      this.pagination.page_sizes = [8, 9, 10, 12];
      this.pagination.total = this.init_items.length;
    },
    //渲染表格
    up_table() {
      let start =
        this.pagination.page_size * (this.pagination.current_page - 1);
      let end =
        start + this.pagination.page_size > this.pagination.total
          ? this.pagination.total + 1
          : start + this.pagination.page_size;
      this.items = this.init_items.slice(start, end);
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.pagination.current_page = 1;
      this.up_table();
    },
    async handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.$util.setCookie("current_page", this.pagination.current_page);
      if (this.pagination.method) {
        this.loading = true;
        const res = await this.$http.get(
          this.$route.name +
            `/${this.pagination.current_page}/${this.pagination.page_size}`
        );
        this.items = res.data;
        if (res.status == 200) {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      } else {
        this.up_table();
      }
    },
    init_height() {},
    //请求方式设置
    set_methods() {
      // let flag = this.init_items.mes.length > 1000;
      let flag = true;
      if (flag) {
        //query每次请求都ajax
        this.query.method = true;
        this.pagination.method = true;
        this.to_query = this.query_ajax;
      } else {
        //请求可以空闲时获取全部数据，实现本地检索
        this.query.method = false;
        this.pagination.method = false;
        this.to_query = this.query_static;
      }
    },
    //query
    to_query() {},
    to_page() {},
    async query_ajax() {
      const config = ["town", "village", "type", "date"];
      const query = this.query.data;
      //true选择拉不是默认选项的
      const flag =
        query[config[0]] ||
        query[config[1]] ||
        query[config[2]] ||
        query[config[3]];
      if (flag) {
        //后台数据库有问题
        const res = this.$http.post(
          this.$route.name + "/query",
          this.query.data
        );
      } else {
      }
    },
    query_static() {}
  },
  created() {
    this.init_height();
    this.fetch();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "fetch"
  }
};
</script>

<style lang="scss" scoped>
</style>
